// 由于webpack 是基于Node进行构建的，webpack的配置文件中，任何合法的Node
// 代码都是支持的。
var path=require('path')
//在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle.js注入到页面的
// 底部，如果要配置插件，需要在导出的对象中，挂载一个plugin节点
var htmlWebpackPlugin=require('html-webpack-plugin')

// 当以命令行形式运行 webpack 或者 webpack-dev-server的时候,工具
// 会发现，我们并没有提供要打包的文件的入口和出口文件，此时，他会检查项目根目录中的
// 配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行
// 打包构建


//vue-loader必须的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports={
    mode:'development',
    entry:path.join(__dirname,'./src/main.js'), //入口文件
    output:{ //指定输出选项
        path:path.join(__dirname,'./dist'),  //输出路径
        filename:'bundle.js'  //指定输出文件的名称
    },
    plugins:[ // 所有的webpack 插件的配置节点
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
            filename:'index.html' //设置生成的内存的页面的名称。只有index这个目录才能被自动的打开的。
        }),
        // 使用vue-loader的过程中必须引入的插件
        new VueLoaderPlugin()
    ],
    module:{ // 配置所有的第三方loader模块的
        rules:[ // 第三方模块的匹配规则
            {test:/\.css$/,use:['vue-style-loader','css-loader']},//处理css文件的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            //处理less文件的loader
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            // 处理scss文件的Loader,
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},
            // 匹配所有的图片规则 配置一个图片loader就可以了  处理图片loader的路径
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
            // 处理字体文件的loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            //配置babel来转换高级的es语法
            {test:/\.vue$/,use:'vue-loader'} //处理.vue文件的loader
        ]
    },
    // resolve:{
    //     alias:{ //alias  别名；   修改vue被导入的时候的包的路径
    //         //如果查询的是vue结尾的，使用vue.js文件
    //         'vue$':"vue/dist/vue.js"
    //     }
    // }
    
}